<template>
	<view class="content">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="image in listsSlides"><image class="banner" :src="image" /></swiper-item>
		</swiper>

		<view class="home_recom">
			<view class="header"><text>热销商品</text></view>
		</view>

		<view class="home_recom_goods">
			<view v-for="item in listsGoods" :key="item.id">
				<goods-item :itemId="item.id" :image="item.image" :title="item.title" :price="item.price" :quantity="0"></goods-item>
			</view>
		</view>
		<my-navbar></my-navbar>
	</view>
</template>

<script>
import goodsItem from '@/components/goods-item/goods-item.vue';
import testTest from '@/components/test-test/test-test.vue';
import myNavbar from '@/components/my-navbar/my-navbar.vue';

import { mapState,mapMutations, mapActions, mapGetters } from 'vuex'

export default {
	
	components: { goodsItem, testTest, myNavbar },

	data() {
		return {
			listsSlides: [],
			listsGoods: [],
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500
		};
	},
	onLoad() {
		this.test();
		this.test2();
	},
	computed: {
		
		
		 
	},
	methods: {
		test2() {
			let pages = getCurrentPages();
			let route = pages[pages.length - 1].route;

			console.log(route);
		},
		test() {
			this.$http.post('/shop.index/home', { cid: 0, nav_cid: 8, last_index: 0, page_size: 10 }).then(res => {
				console.log(res.data);
				this.listsGoods = res.data.data.lists;
				this.listsSlides = res.data.data.slides;
			});
		}
	}
};
</script>

<style lang="scss">
image.banner {
	width: 100%;
	min-height: 100px;
	box-sizing: border-box;
	display: block;
}

.content {
	margin-bottom: 70px;
}
.home_recom .header {
	margin: 10px 10px;
	line-height: 24px;
	position: relative;
	text-align: center;
	text {
		background-color: #efeef3;
		font-size: 15px;
		color: #888;
		-webkit-tap-highlight-color: transparent;
		position: relative;
		display: inline-block;
		padding: 0 15px;
		z-index: 1;
		a {
			color: #fff !important;
		}
	}
}

.home_recom .header:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
	background: #dedede;
}
.home_recom .header.green text {
	background: #7fb80e;
}
.home_recom .header.green:after {
	background: #7fb80e;
}
</style>
